<template>
  <div class="receiving">
    <a-page-header
      title="收货管理"
      sub-title="采购商品收货确认"
    />

    <a-card>
      <a-table
        :columns="columns"
        :data-source="receivings"
        :pagination="pagination"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'status'">
            <a-tag :color="getStatusColor(record.status)">
              {{ getStatusText(record.status) }}
            </a-tag>
          </template>
          <template v-else-if="column.key === 'action'">
            <a-space>
              <a-button type="link" size="small">查看</a-button>
              <a-button type="link" size="small" v-if="record.status === 'pending'">确认收货</a-button>
              <a-button type="link" size="small" v-if="record.status === 'partial'">部分收货</a-button>
            </a-space>
          </template>
        </template>
      </a-table>
    </a-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'

const columns = [
  { title: '收货单号', dataIndex: 'receiveNo', key: 'receiveNo' },
  { title: '采购订单', dataIndex: 'purchaseOrder', key: 'purchaseOrder' },
  { title: '供应商', dataIndex: 'supplier', key: 'supplier' },
  { title: '到货时间', dataIndex: 'arrivalTime', key: 'arrivalTime' },
  { title: '商品数量', dataIndex: 'quantity', key: 'quantity' },
  { title: '状态', dataIndex: 'status', key: 'status' },
  { title: '操作', key: 'action', width: 200 },
]

const receivings = ref([
  {
    id: 1,
    receiveNo: 'RC202401001',
    purchaseOrder: 'PO202401002',
    supplier: '优质蔬菜供应商',
    arrivalTime: '2024-01-16 14:30',
    quantity: '50件',
    status: 'pending'
  },
  {
    id: 2,
    receiveNo: 'RC202401002',
    purchaseOrder: 'PO202401001',
    supplier: '新鲜果业有限公司',
    arrivalTime: '2024-01-15 10:20',
    quantity: '30箱',
    status: 'completed'
  }
])

const pagination = reactive({
  current: 1,
  pageSize: 10,
  total: 2,
})

const getStatusColor = (status: string) => {
  const colorMap: Record<string, string> = {
    pending: 'orange',
    partial: 'blue',
    completed: 'green'
  }
  return colorMap[status] || 'default'
}

const getStatusText = (status: string) => {
  const textMap: Record<string, string> = {
    pending: '待收货',
    partial: '部分收货',
    completed: '已完成'
  }
  return textMap[status] || status
}
</script>

<style scoped>
.receiving {
  padding: 24px;
}
</style>